<template>
  <div class="app-container">
    <el-row>
      <el-date-picker
        v-model="query.stime"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="开始日期"
        style="margin-left: 5px"
      >
      </el-date-picker>
      <span style="margin-left: 2px">至</span>
      <el-date-picker
        v-model="query.etime"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="结束日期"
        style="margin-left: 5px"
      >
      </el-date-picker>

      <el-input
        size="medium"
        placeholder="帐号、请求地址、目的地"
        suffix-icon="el-icon-search"
        style="width: 250px; margin-left: 5px"
        v-model="query.s"
        @keyup.enter.native="search"
      >
      </el-input>

      <!-- <el-button style="margin-left: 5px" type="primary" round @click="search"
        >查询</el-button
      > -->
      <el-button type="primary" style="margin-left: 10px;" icon="el-icon-search" @click="search">搜索</el-button>
    </el-row>

    <el-row>
      <el-table :data="ls" style="width: 100%" v-loading="loading">
        <el-table-column prop="username" label="帐号"> </el-table-column>
        <el-table-column prop="ip" label="IP"> </el-table-column>
        <el-table-column prop="requestPath" label="请求地址"> </el-table-column>
        <el-table-column prop="targetServer" label="目的地"> </el-table-column>

        <el-table-column prop="startTime" label="时间"> </el-table-column>

        <el-table-column prop="requestContentType" label="contentType">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>{{ scope.row.requestBody }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{
                  scope.row.requestContentType
                }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-row>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="query.page"
          :limit.sync="query.size"
          @pagination="loadLogs"
        />
      </el-row>
    </el-row>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

import { sysLogs } from "@/api/cloudwebapi";
import { cloneDeep } from "lodash";
import { Form } from "element-ui";
import { parseTime, dateFormat } from "@/utils";
import { use } from "vue/types/umd";
import Pagination from "@/components/Pagination/index.vue";
@Component({
  name: "SysLogs",
  components: {
    Pagination,
  },
})
export default class extends Vue {
  mounted() {
    this.loadLogs();
  }
  private async search() {
    this.query.page = 1;
    this.loadLogs();
  }
  private async loadLogs() {
    this.loading = true;
    let d: any = await sysLogs(this.query);
    this.ls = d.data.content;
    this.total = d.data.totalElements;
    this.loading = false;
  }
  private loading: boolean = true;
  private ls: Array<any> = [];

  private query = {
    page: 1,
    size: 10,
    stime: dateFormat(new Date(), "yyyy-MM-dd"),
    etime: dateFormat(new Date(), "yyyy-MM-dd"),
    s: "",
  };
  private total = 0;
}
</script>

<style lang="scss" scoped>
.pagination-container {
  float: right;
}
</style>